<template>
  <div class="startAdsRightComponent" v-if="control">
    <collapseComponent
      title="组件状态"
      :open="true"
      :rightIndex="0"
      direction="column"
      @switchCollapse="switchCollapse"
    >
      <radioComponent
        v-if="control.right[0].catalog[0].display === 'block'"
        :item="control.right[0].catalog[0]"
        :id="control.id"
        :rightIndex="0"
        :catalogIndex="0"
        @updateParent="updateParent"
        data-title="广告状态"
      ></radioComponent>
    </collapseComponent>

    <collapseComponent
      title="组件样式"
      :open="true"
      :rightIndex="1"
      direction="column"
      @switchCollapse="switchCollapse"
    >
      <radioGroupComponent
        v-if="control.right[1].catalog[0].display === 'block'"
        :item="control.right[1].catalog[0]"
        :id="control.id"
        :rightIndex="1"
        :catalogIndex="0"
        @updateParent="updateParent"
        data-title="广告样式"
      ></radioGroupComponent>
      <div style="height: 20px"></div>
      <div class="adStyle1" v-if="control.right[1].catalog[0].value === 1">
        <radioComponent
          v-if="control.right[1].catalog[1].display === 'block'"
          :item="control.right[1].catalog[1]"
          :id="control.id"
          :rightIndex="1"
          :catalogIndex="1"
          @updateParent="updateParent"
          data-title="定时关闭"
        ></radioComponent>
        <div style="height: 20px"></div>
        <radioComponent
          v-if="control.right[1].catalog[2].display === 'block'"
          :item="control.right[1].catalog[2]"
          :id="control.id"
          :rightIndex="1"
          :catalogIndex="2"
          @updateParent="updateParent"
          data-title="关闭按钮"
        ></radioComponent>
      </div>
      <div class="adStyle1" v-if="control.right[1].catalog[0].value !== 1">
        <colorComponent
          v-if="control.right[1].catalog[3].display === 'block'"
          :item="control.right[1].catalog[3]"
          :id="control.id"
          :rightIndex="1"
          :catalogIndex="3"
          @updateParent="updateParent"
          data-title="背景颜色"
        ></colorComponent>
        <div style="height: 20px"></div>
        <sliderComponent
          v-if="control.right[1].catalog[4].display === 'block'"
          :item="control.right[1].catalog[4]"
          :id="control.id"
          :rightIndex="1"
          :catalogIndex="4"
          @updateParent="updateParent"
          data-title="背景透明度"
        ></sliderComponent>
      </div>
    </collapseComponent>

    <collapseComponent
      title="其它设置"
      :open="true"
      :rightIndex="2"
      direction="column"
      @switchCollapse="switchCollapse"
    >
      <radioComponent
        v-if="control.right[2].catalog[0].display === 'block'"
        :item="control.right[2].catalog[0]"
        :id="control.id"
        :rightIndex="2"
        :catalogIndex="0"
        @updateParent="updateParent"
        data-title="显示设置"
      ></radioComponent>
      <div style="height: 20px"></div>
      <sliderComponent
        v-if="control.right[2].catalog[1].display === 'block'"
        :item="control.right[2].catalog[1]"
        :id="control.id"
        :rightIndex="2"
        :catalogIndex="1"
        @updateParent="updateParent"
        data-title="时间间隔"
      ></sliderComponent>
      <div style="height: 20px"></div>
      <radioComponent
        v-if="control.right[2].catalog[2].display === 'block'"
        :item="control.right[2].catalog[2]"
        :id="control.id"
        :rightIndex="2"
        :catalogIndex="2"
        @updateParent="updateParent"
        data-title="显示设置"
      ></radioComponent>
    </collapseComponent>

    <collapseComponent
      title="内容"
      :open="true"
      :rightIndex="3"
      direction="column"
      @switchCollapse="switchCollapse"
    >
      <div class="iconWrapper">
        <draggable
          class="iconDraggableWrapper"
          v-model="control.right[3].catalog[0].list"
          handle=".iconElIconRank"
          v-bind="iconDraggableOptions"
          @end="iconDraggableChanged"
          v-if="control.right[3].catalog[0].list.length > 0"
        >
          <transition-group tag="div" class="list">
            <div
              class="item iconDraggableItem"
              v-for="(iconItem, iconIndex) in control.right[3].catalog[0].list"
              :key="iconItem.id"
            >
              <div class="itemL">
                <i class="el-icon-rank iconElIconRank"></i>
              </div>
              <div class="itemR">
                <div class="row">
                  <div class="left">图片：</div>
                  <div class="right">
                    <div class="buttonWrapper">
                      <div
                        class="uploadBtn"
                        v-if="iconItem.imgUrl == ''"
                        @click="openChooseIcon(iconIndex)"
                      >
                        <i class="el-icon-plus"></i>
                      </div>
                      <img
                        v-if="iconItem.imgUrl"
                        :src="iconItem.imgUrl"
                        alt=""
                      />

                      <span
                        v-if="iconItem.imgUrl != ''"
                        class="repaceImg"
                        @click="updateChooseIcon(iconIndex)"
                        >替换</span
                      >

                      <span
                        v-if="iconItem.imgUrl != ''"
                        class="el-icon-error delImg"
                        @click="delIcon(iconIndex)"
                      ></span>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="left">点击链接：</div>
                  <div class="right">
                    <div class="chooseUrl">
                      <div class="urlBox">
                        <div
                          class="haveUrl"
                          v-if="iconItem.linkName || iconItem.linkUrl"
                        >
                          <el-button plain disabled class="haveUrlBtn">
                            <i class="el-icon-paperclip"></i>
                            <span>{{
                              iconItem.linkName || iconItem.linkUrl || ""
                            }}</span>
                          </el-button>
                          <el-button
                            type="text"
                            class="updateHref"
                            @click="rightUpdateLinkForIcon(iconIndex)"
                            >修改</el-button
                          >
                        </div>
                        <div class="noUrl" v-else>
                          <el-button
                            plain
                            class="noUrlBtn"
                            @click="rightChooseLinkForIcon(iconIndex)"
                          >
                            <i class="el-icon-paperclip"></i>
                            选择链接
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <span
                class="el-icon-error delImageSwiperItem"
                v-if="control.right[3].catalog[0].list.length > 2"
                @click="delIconWrapperItem(iconItem.id)"
              ></span>
            </div>
          </transition-group>
        </draggable>

        <el-button style="width: 100%" @click="addIconMenuItem"
          >+添加菜单</el-button
        >
      </div>
    </collapseComponent>

    <div style="height: 50px"></div>
    <ChooseLinkComponent></ChooseLinkComponent>
    <ChooseImageComponent></ChooseImageComponent>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import draggable from "vuedraggable";
import ChooseLinkComponent from "../../components/vlonChooseLink/Index.vue";
import ChooseImageComponent from "../../components/vlonChooseImage/Index.vue";
import adsImg from "@/static/images/adv.jpg";
export default {
  name: "startAdsRightComponent",
  data() {
    return {
      control: null,
      adsImg,
      //为了防止页面初始化时，触发不必要的通知更新，此处设置标识符，初始化后2秒置为true
      needUpdate: false,
      iconDraggableOptions: {
        group: { name: "layout", pull: false, put: false },
        draggable: ".iconDraggableItem",
        forceFallback: true,
        sort: true,
        animation: 300,
      },
      imgDraggableOptions: {
        group: { name: "layout", pull: false, put: false },
        draggable: ".imgDraggableItem",
        forceFallback: true,
        sort: true,
        animation: 300,
      },
      //选择图标/图片/链接时，记录下当前的索引号，便于选择完成后回写到对应对象上
      currentChooseIndex: 0,
    };
  },
  created() {},
  props: ["controlData"],
  components: {
    draggable,
    ChooseLinkComponent,
    ChooseImageComponent,
    collapseComponent: () => import("../../components/collapseComponent"),
    radioGroupComponent: () =>
      import("../right/components/lone/radioGroupComponent"),
    colorComponent: () => import("../right/components/lone/colorComponent"),
    radioComponent: () => import("../right/components/lone/radioComponent"),
    sliderComponent: () => import("../right/components/lone/sliderComponent"),
  },
  mounted() {
    this.$nextTick(() => {
      this.init();

      Bus.$off(`chooseImageAfterstartAds`);
      Bus.$on(`chooseImageAfterstartAds`, (params) => {

        this.control.right.forEach(item => {
          if(item.catalog && item.catalog.length>0) {
            item.catalog.forEach(row => {
              if(row.ename == "list") {
                row.list[this.currentChooseIndex].imgUrl = params.url;
              }
            })
          }
        })
        this.control.main.list[this.currentChooseIndex].imgUrl = params.url;

        let list = [];
        this.control.right.forEach(item => {
          if(item.catalog && item.catalog.length>0) {
            item.catalog.forEach(row => {
              if(row.ename == "list") {
                list = JSON.parse(JSON.stringify(row.list));
              }
            })
          }
        })

        this.updateParent(
          JSON.stringify({
            rightIndex: 3,
            catalogIndex: 0,
            ename: "list",
            value: JSON.stringify(list),
            needUpdateMainChild: true,
          })
        );

      });

      Bus.$off(`chooseLinkAfterstartAds`);
      Bus.$on(`chooseLinkAfterstartAds`, (params) => {
        this.control.right.forEach(item => {
          if(item.catalog && item.catalog.length>0) {
            item.catalog.forEach(row => {
              if(row.ename == "list") {
                row.list[this.currentChooseIndex].linkUrl = params.url;
                row.list[this.currentChooseIndex].linkName = params.name;
              }
            })
          }
        })
        this.control.main.list[this.currentChooseIndex].linkUrl = params.url;
        this.control.main.list[this.currentChooseIndex].linkName = params.name;

        let list = [];
        this.control.right.forEach(item => {
          if(item.catalog && item.catalog.length>0) {
            item.catalog.forEach(row => {
              if(row.ename == "list") {
                list = JSON.parse(JSON.stringify(row.list));
              }
            })
          }
        })

        this.updateParent(
          JSON.stringify({
            rightIndex: 3,
            catalogIndex: 0,
            ename: "list",
            value: JSON.stringify(list),
            needUpdateMainChild: true,
          })
        );

      });

    });

    setTimeout(() => {
      this.needUpdate = true;
    }, 1000);

  },
  methods: {

    //初始化
    init() {
      if (this.controlData) {
        this.control = null;
        this.$nextTick(() => {
          this.control = JSON.parse(JSON.stringify(this.controlData));
        });
      }
    },
    //菜单按钮，是图标+文字时，选择图标
    openChooseIcon(index) {
      this.currentChooseIndex = index;
      Bus.$emit("openChooseImgGroup", {
        ename: "chooseImage",
        controlid: "startAds",
      });
    },
    //菜单按钮，是图标+文字时，修改图标
    updateChooseIcon(index) {
      this.currentChooseIndex = index;
      Bus.$emit("openChooseImgGroup", {
        ename: "chooseImage",
        controlid: "startAds",
      });
    },
    //菜单按钮，是图标+文字时，删除图标
    delIcon(index) {
      this.control.right.forEach(item => {
        if(item.catalog && item.catalog.length>0) {
          item.catalog.forEach(row => {
            if(row.ename == "list") {
              row.list[index].imgUrl = "";
            }
          })
        }
      })

      this.control.main.list[index].imgUrl = "";

      let list = [];
      this.control.right.forEach(item => {
        if(item.catalog && item.catalog.length>0) {
          item.catalog.forEach(row => {
            if(row.ename == "list") {
              list = JSON.parse(JSON.stringify(row.list));
            }
          })
        }
      })

     
      this.updateParent(
        JSON.stringify({
          rightIndex: 3,
          catalogIndex: 0,
          ename: "list",
          value: JSON.stringify(list),
          needUpdateMainChild: true,
        })
      );
    },

    //菜单按钮，是图标+文字时，修改链接
    rightUpdateLinkForIcon(index) {
      this.currentChooseIndex = index;
      Bus.$emit("openChooseLinkGroup", {
        name: "chooseLink",
        controlid: "startAds",
      });
    },
    //菜单按钮，是图标+文字时，选择链接
    rightChooseLinkForIcon(index) {
      this.currentChooseIndex = index;
      Bus.$emit("openChooseLinkGroup", {
        name: "chooseLink",
        controlid: "startAds",
      });
    },

    //添加轮播图
    addIconMenuItem() {
      let item = new Object();
      item.id = "id" + new Date().getTime();
      item.imgUrl = adsImg;
      item.default = "";
      item.linkUrl = "";
      item.linkName = "";

      this.control.right.forEach(ri => {
        if(ri.catalog && ri.catalog.length>0) {
          ri.catalog.forEach(row => {
            if(row.ename == "list") {
              row.list.push(item)
            }
          })
        }
      })

      let list = [];
      this.control.right.forEach(item => {
        if(item.catalog && item.catalog.length>0) {
          item.catalog.forEach(row => {
            if(row.ename == "list") {
              list = JSON.parse(JSON.stringify(row.list));
            }
          })
        }
      })
   
      this.updateParent(
        JSON.stringify({
          rightIndex: 3,
          catalogIndex: 0,
          ename: "list",
          value: JSON.stringify(list),
          needUpdateMainChild: true,
        })
      );
    },

    //删除某个是文字+图标的菜单按钮
    delIconWrapperItem(itemId) {
      let list = [];
      this.control.right.forEach(item => {
        if(item.catalog && item.catalog.length>0) {
          item.catalog.forEach(row => {
            if(row.ename == "list") {
              list = JSON.parse(JSON.stringify(list));
            }
          })
        }
      })

      list = list.filter((row) => row.id != itemId);

      this.control.right.forEach(item => {
        if(item.catalog && item.catalog.length>0) {
          item.catalog.forEach(row => {
            if(row.ename == "list") {
              row.list = JSON.parse(JSON.stringify(list));
            }
          })
        }
      })

      this.updateParent(
        JSON.stringify({
          rightIndex: 3,
          catalogIndex: 0,
          ename: "list",
          value: JSON.stringify(list),
          needUpdateMainChild: true,
        })
      );
    },

    //菜单按钮是图标+文字时，在右侧拖拽排序时，排序完成后触发的事件
    iconDraggableChanged() {
      let list = [];
      this.control.right.forEach(item => {
        if(item.catalog && item.catalog.length>0) {
          item.catalog.forEach(row => {
            if(row.ename == "list") {
              list = JSON.parse(JSON.stringify(list));
            }
          })
        }
      })

      this.updateParent(
        JSON.stringify({
          rightIndex: 3,
          catalogIndex: 0,
          ename: "list",
          value: JSON.stringify(list),
          needUpdateMainChild: true,
        })
      );
    },

    //从子组件更新过来的数据
    updateParent(params) {
      let p = JSON.parse(params),
        ri = p.rightIndex,
        ci = p.catalogIndex,
        pe = p.ename,
        pv = p.value;
      //广告状态
      if (pe === "isEnable") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //广告样式
      if (pe === "adStyle") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //定时关闭
      if (pe === "timedOff") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //关闭按钮
      if (pe === "showCloseBtn") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //背景颜色
      if (pe === "bgColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //背景透明度
      if (pe === "bgOpacity") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //显示设置
      if (pe === "setDisplay") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //时间间隔
      if (pe === "timeInterval") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //显示logo
      if (pe === "displayLogo") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //内容
      if (pe === "list") {
        this.control.right[ri].catalog[ci].list = JSON.parse(pv);
        this.control.main[pe] = JSON.parse(pv);
      }
      //更新到main中的子组件
      if (p.needUpdateMainChild) {
        //更新到main中具体组件中的数据
        if (this.needUpdate) {
          Bus.$emit("updateStartAdsMainComponentData", {
            data: pv,
            ename: pe,
          });
          if (p.needUpdateBgColor) {
            this.$nextTick(() => {
              if (this.$refs.bgColor) {
                this.$refs.bgColor.init();
              }
            });
          }
        }
      }
    },
    //拉抽屉
    switchCollapse(params) {
      this.control.right[params.rightIndex].open = params.open;
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.startAdsRightComponent {
  .iconWrapper {
    .item {
      height: 130px;
    }
  }
  .iconWrapper {
    .item {
      background-color: #f4f6f8;
      margin-bottom: 20px;
      padding: 15px 15px 1px 0;
      position: relative;
      border-radius: 4px;
      display: flex;
      .itemL {
        width: 30px;
        height: 100%;
        align-items: center;
        display: flex;
        justify-content: flex-end;
        i {
          cursor: move;
        }
      }
      .itemR {
        width: calc(100% - 30px);
        height: 100%;
      }
      .delImageSwiperItem {
        position: absolute;
        top: -4px;
        right: -4px;
        z-index: 2;
        display: none;
        opacity: 0.5;
        cursor: pointer;
        &:hover {
          cursor: pointer;
        }
      }
      &:hover {
        .delImageSwiperItem {
          display: block;
        }
      }
      .row {
        display: flex;
        margin-bottom: 20px;
        align-items: center;
        &:last-child {
          margin-bottom: 0px;
        }
        .left {
          width: 100px;
          padding-right: 10px;
          box-sizing: border-box;
          font-size: 12px;
          display: flex;
          justify-content: flex-end;
        }
        .right {
          display: flex;
          width: calc(100% - 100px);
          .normal,
          .active {
            & > span {
              font-size: 12px;
              width: 40px;
              padding: 5px 0;
              color: #666;
              display: flex;
              justify-content: center;
            }
          }
          .normal {
            margin-right: 30px;
          }
        }
      }
    }
  }
  .buttonWrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background-color: #fff;
    width: 40px;
    .uploadBtn {
      width: 100%;
      height: 100%;
      display: flex;
      box-sizing: border-box;
      border-radius: 2px;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      flex-direction: column;
      position: relative;
      cursor: pointer;
      border: 1px solid #e9edef;
      i {
        color: #0079fe;
        font-weight: bold;
        font-size: 14px;
        margin-top: 5px;
        margin-bottom: 5px;
      }
    }
    img {
      width: 100%;
      height: 100%;
      display: flex;
    }
    .repaceImg,
    .delImg {
      position: absolute;
      z-index: 3;
      opacity: 0.5;
      display: none;
      cursor: pointer;
      &:hover {
        cursor: pointer;
      }
    }
    .repaceImg {
      left: 0;
      bottom: 0px;
      width: 100%;
      height: 20px;
      font-size: 12px;
      background-color: rgba(0, 0, 0, 0.8);
      color: #fff;
      justify-content: center;
    }
    .delImg {
      right: -4px;
      top: -4px;
    }
    &:hover {
      .repaceImg,
      .delImg {
        display: flex;
      }
    }
  }
  .chooseUrl {
    display: flex;
    flex: 1;
    flex-direction: column;
    .urlBox {
      .haveUrl {
        position: relative;
        .haveUrlBtn {
          padding: 0;
          height: 32px;
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 30px;
          box-sizing: border-box;
          position: relative;
          i {
            border-right: 1px solid transparent;
            height: 32px;
            display: flex;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            position: absolute;
            width: 30px;
            top: 0;
            left: 0;
            z-index: 2;
          }
          &:hover {
            i {
              border-color: #eee;
            }
          }
        }

        .updateHref {
          padding: 0;
          position: absolute;
          top: 0;
          right: 0;
          z-index: 2;
          height: 32px;
          display: flex;
          align-items: center;
          width: 60px;
          justify-content: center;
          border-radius: 0;
          border-left: 1px solid #eee;
        }
      }
      .noUrl {
        .noUrlBtn {
          padding: 0;
          height: 32px;
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 30px;
          box-sizing: border-box;
          position: relative;
          i {
            height: 32px;
            display: flex;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            position: absolute;
            width: 30px;
            top: 0;
            left: 0;
            z-index: 2;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.StartAdsRightComponent {
  .content {
    .adStyle1 {
      .radioComponent {
        .right {
          .el-radio-group {
            .el-radio {
              margin-right: 10px !important;
            }
          }
        }
      }
    }
  }
}
.adStyle1 {
  .el-radio {
    margin-right: 20px !important;
    &:last-child {
      margin-right: 0px !important;
    }
  }
}
</style>


